﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery根据内容滚动位置判断对应的多个菜单高亮(原创)</title>
<script src="../js/jquery.min.js"></script>
<style>
body {
	font-size:14px;
	line-height:30px;
	margin:0;
	line-height:30px;
	color:#000;
}
.nav {
	width:150px;
	background:#ccc;
	position:fixed;
	top:0px;
}
.nav ul,.nav ul li {
	width:100%;
	list-style-type:none;
	margin:0;
	padding:0;
}
.nav ul li a {
	text-decoration:none;
	display:block;
	color:#000;
}
.nav ul li.active {
	background-color:#333;
}
.nav ul li.active a {
	color:#fff;
}
.container {
	width:800px;
	height:500px;
	margin:0px auto;
	background:#ddd;
	border-bottom:1px solid #ccc;
	font-size:24px;
	line-height:100px;
	text-align:center;
}
.container.active {
	color:#fff;
}
</style>
</head>
<body>
<div class="nav">
    <ul>
        <li>
            <a href="#one">Menu 1</a>
        </li>
        <li>
            <a href="#two">Menu 2</a>
        </li>
        <li>
            <a href="#three">Menu 3</a>
        </li>
        <li>
            <a href="#four">Menu 4</a>
        </li>
        <li>
            <a href="#five">Menu 5</a>
        </li>
        <li>
            <a href="#six">Menu 6</a>
        </li>
    </ul>
</div>

<div id="wrapper">
    <div id="one" class="container">
        one
    </div>
    <div id="two" class="container">
        two
    </div>
    <div id="three" class="container">
        three
    </div>
    <div id="four" class="container">
        four
    </div>
    <div id="five" class="container">
        five
    </div>
    <div id="six" class="container">
        six
    </div>
</div>

<script>
$(document).ready(function() {

    var $sections = $('.container'); //选取容器
    var inScreen = 100; //进入屏幕100px后高亮
    var outScreen = 200; //距离滚出屏幕还有200px时取消高亮

    function scrollactive() {
        $sections.each(function(idx, $sec) {
            var $sec = $($sec);
            var wHeight = $(window).height(); //获取窗口的高度
            var sHeight = $sec.height(); //获取元素的高度
            var wScroll = $(window).scrollTop(); //获取窗口距离网页顶部的高度
            var sScroll = $sec.offset().top; //获取元素距离顶部的高度
            var wTop = wScroll + wHeight - inScreen; //窗口底部距离网页顶端的高度
            var sTop = sScroll + sHeight - outScreen; //元素底部距离网页顶端的高度

            //给当前所有在浏览器窗口内显示的菜单及其容器添加高亮样式
            if (sScroll < wTop && sTop > wScroll) { //判断元素顶部、低部是否在当前窗口中
                $sec.addClass('active'); //给容器添加高亮样式
                var idn = $sec.attr('id'); //获取容器的id值
                $('.nav li a[href=' + '"#' + idn + '"]').parent('li').addClass('active'); //给对应的菜单添加高亮样式
            } else {
                $sec.removeClass('active');
                var idr = $sec.attr('id');
                $('.nav li a[href=' + '"#' + idr + '"]').parent('li').removeClass('active');
            };

            //只高亮一个菜单
            //			var w;
            //			if(sHeight < wHeight){
            //				w = wHeight-sHeight; //屏幕与元素间的高度差
            //			}else{
            //				w = 1; //防止滚动条默认偏移
            //			};
            //			if(sScroll-w < wScroll) {  //判断元素顶部是否在窗口中
            //				var idn = $sec.attr('id');
            //				$('.nav li').removeClass('active');
            //				$('.nav li a[href='+'"#' + idn + '"]').parent('li').addClass('active');
            //			};

        });
    };
    scrollactive();

    //滚动浏览器触发事件
    $(window).scroll(function() {
        scrollactive();
    });

    //锚点平滑滚动
    $('.nav li a').click(function() {
        $('html, body').animate({
            scrollTop: ($($(this).attr('href')).offset().top - 30) + 'px'
        }, {
            duration: 400,
            easing: 'swing'
        });
        return false;
    });
});
</script>

</body>
</html>
